﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
   <head>
      <title>VEMap.AddShape, VEMap.DeleteShape, VEMap.Clear, VEShape.Hide, VEShape.Show</title>
      <meta http-equiv="Content-Type" content="text/html; charset=utf-8">

      <script type="text/javascript" src="http://ecn.dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=6.3"></script>

      <script type="text/javascript">
          var map = null;

          var shape = null;
          var c1Shape = null;
          var c2Shape = null;
          var c3Shape = null;
          var c4Shape = null;

          var cornerOne = new VELatLong(45.01188, -111.06687);
          var cornerTwo = new VELatLong(45.01534, -104.06324);
          var cornerThree = new VELatLong(41.01929, -104.06);
          var cornerFour = new VELatLong(41.003, -111.05878);

          function GetMap() {
              map = new VEMap('myMap');
              map.LoadMap();

              // Set initial button states.
              btnDeleteShape.disabled = "disabled";
              btnAddShape.disabled = 0;
              btnHideShape.disabled = "disabled";
              btnShowShape.disabled = "disabled";
          }

          function AddShape() {
              // Create pushpins at each corner
              c1Shape = new VEShape(VEShapeType.Pushpin, cornerOne);
              c2Shape = new VEShape(VEShapeType.Pushpin, cornerTwo);
              c3Shape = new VEShape(VEShapeType.Pushpin, cornerThree);
              c4Shape = new VEShape(VEShapeType.Pushpin, cornerFour);

              // Create the VEShape object and assign parameters.
              var points = new Array(cornerOne, cornerTwo, cornerThree, cornerFour);

              shape = new VEShape(VEShapeType.Polygon, points);
              shape.SetLineWidth(3);
              shape.SetLineColor(new VEColor(0, 150, 100, 1.0));
              shape.SetFillColor(new VEColor(0, 150, 100, 0.5));

              // Add the shapes to the map
              map.AddShape(shape);
              map.AddShape(c1Shape);
              map.AddShape(c2Shape);
              map.AddShape(c3Shape);
              map.AddShape(c4Shape);

              // Set the map view to the same points used by the shape.
              map.SetMapView(points);

              // Toggle button states.
              btnDeleteShape.disabled = 0;
              btnAddShape.disabled = "disabled";
              btnHideShape.disabled = 0;
              btnShowShape.disabled = "disabled";
          }

          function DeleteShape() {
              // Delete the shape.
              map.DeleteShape(shape);

              // Toggle button states.
              btnDeleteShape.disabled = "disabled";
              btnAddShape.disabled = 0;
              btnHideShape.disabled = "disabled";
              btnShowShape.disabled = "disabled";
          }

          function HideShape() {
              // Hide the shape from view.
              shape.Hide();

              // Toggle button states.
              btnDeleteShape.disabled = 0;
              btnAddShape.disabled = "disabled";
              btnHideShape.disabled = "disabled";
              btnShowShape.disabled = 0;
          }

          function ShowShape() {
              // Make the shape visible again.
              shape.Show();

              // Toggle button states.
              btnDeleteShape.disabled = 0;
              btnAddShape.disabled = "disabled";
              btnHideShape.disabled = 0;
              btnShowShape.disabled = "disabled";
          }

          function ClearMap() {
              map.Clear();
          }
      </script>
   </head>
   <body onload="GetMap();">
      <div id='myMap' style="position:relative; width:400px; height:400px;"></div>
       <input id="btnAddShape" type="button" value="Click to Add a Shape" 
       name="addshape" onclick="AddShape()"><br />
       <input id="btnDeleteShape" type="button" value="Click to Delete the Shape" 
       name="deleteshape" onclick="DeleteShape()"><br />
       <input id="btnHideShape" type="button" value="Click to Hide the Shape" 
       name="hideshape" onclick="HideShape()"><br />
       <input id="btnShowShape" type="button" value="Click to Show the Shape" 
       name="showshape" onclick="ShowShape()"><br />
       <input id=btnClear" type="button" value="Click to clear the map"
       name="clearmap" onclick="ClearMap()">
   </body>
</html>



<!--<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Geocoding in Bing Maps</title>
    <script type="text/javascript" src="http://ecn.dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=6.3"></script>
    <script type="text/javascript">
        var myMap = null;

        var confidenceStrings = ["High", "Medium", "Low"];
        var precisionStrings = ["Interpolated", "Rooftop"];

        var pushpinUrls = ["pushpinGreen.gif", "pushpinOrange.gif", "pushpinRed.gif"];

        function LoadMap() {
            myMap = new VEMap("mapDiv");

            myMap.LoadMap();
            myMap.AttachEvent("onclick", PixelClick);

            StartGeocoding("1 Microsoft Way, Redmond WA");

        }

        function UnloadMap() {
            if (myMap != null) {
                myMap.Dispose();
            }
        }

        function StartGeocoding(address) {
            myMap.Find(null,         // what
                  address,           // where
                  null,              // VEFindType (always VEFindType.Businesses)
                  null,              // VEShapeLayer (base by default)
                  null,              // start index for results (0 by default)
                  null,              // max number of results (default is 10)
                  null,              // show results? (default is true)
                  null,              // create pushpin for what results? (ignored since what is null)
                  null,              // use default disambiguation? (default is true)
                  null,              // set best map view? (default is true)
                  GeocodeCallback);  // call back function
        }

        function GeocodeCallback(shapeLayer, findResults, places, moreResults, errorMsg) {
            // if there are no results, display any error message and return
            if (places == null) {
                alert((errorMsg == null) ? "There were no results" : errorMsg);
                return;
            }

            var bestPlace = places[0];

            // Add pushpin to the *best* place
            var location = bestPlace.LatLong;

            var newShape = new VEShape(VEShapeType.Pushpin, location);

            var desc = "Latitude: " + location.Latitude + "<br>Longitude:" + location.Longitude;
            newShape.SetDescription(desc);
            newShape.SetTitle(bestPlace.Name);
            myMap.AddShape(newShape);
        }

        

        function MatchCode(code) {
            if (code == VEMatchCode.None) {
                return "No match";
            }

            var codeDesc = "";
            var cVal;

            cVal = code & VEMatchCode.Good;
            if (cVal > 0) {
                codeDesc += "Good ";
            }

            cVal = code & VEMatchCode.Ambiguous;
            if (cVal > 0) {
                codeDesc += "Ambiguous ";
            }

            cVal = code & VEMatchCode.UpHierarchy;
            if (cVal > 0) {
                codeDesc += "UpHierarchy ";
            }

            cVal = code & VEMatchCode.Modified;
            if (cVal > 0) {
                codeDesc += "Modified ";
            }

            return (codeDesc + "Match");
        }

        function onGeocodeClick() {
            myMap.Clear();
            address = document.getElementById("txtWhere").value;
            StartGeocoding(address);
            var latLong = myMap.GetCenter();
            alert(latLong);
        }

        function PixelClick(e) {
            var x = e.mapX;
            var y = e.mapY;
            pixel = new VEPixel(x, y);
            var LL = myMap.PixelToLatLong(pixel);
            alert("Pixel X: " + x + " | Pixel Y: " + y + "<br /> LatLong: " + LL);

            // VEMap.GetTop returns the position of the top edge of the map control, in pixels.
            // VEMap.GetLeft returns the position of the left edge of the map control, in pixels.
            // These units are defined using standard DHTML markup.
            // See the style attribute for the <div> element 'myMap'.
            var info = 'The top edge of the map on the Web page is at pixel: ' + myMap.GetTop() + "\n";
            info += 'The left edge of the map on the Web page is at pixel: ' + myMap.GetLeft() + "\n";
            info += 'The latitude,longitude at the center of the map is: ' + myMap.GetCenter() + "\n";
            info += 'The current zoom level of the map is: ' + myMap.GetZoomLevel() + "\n";
            info += 'The map control version is: ' + VEMap.GetVersion() + "\n";
            alert(info);

        }

      </script>
    <style type="text/css">
        .pinText
        {
            position: relative;
            top: -25px;
            left: 2px;
            width: 30px;
            color: #ffffff;
            text-align: center;
            font: bold 12px Arial;
        }
    </style>
</head>
<body onload="LoadMap()" onunload="UnloadMap()">
    <div style="font-family: Arial; font-size: 10pt">
        Address:
        <input id="txtWhere" type="text" style="width: 255px" />&nbsp;
        <input type="button" value="Geocode" onclick="onGeocodeClick()" />
    </div>
    <br />
    <div style="position: relative; width: 800px; height: 700px;" id="mapDiv">
    </div>
    <div id="resultsDiv" style="font-family: Arial; font-size: 8pt; position: relative;
        top: -400px; left: 425px; width: 400px">
    </div>
</body>
</html>
-->